<template>
  <div class="detailContainer" :style="'min-height: ' + docheight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="bannerCont">
        <img :src="detailInfo.package_cover" />
      </div>
      <div class="mainCont">
        <div class="typeCont">
          <div class="typeItem">
            <div class="typeItemName">{{ detailInfo.package_name }}</div>
            <div class="typeItemPrice">
              {{ detailInfo.package_price }}元/{{ detailInfo.package_time }}分钟
            </div>
          </div>
        </div>
        <div class="bzCont">
          <div class="bzItem">
            <span class="iconfont icon-shiming"></span>
            <span>实名认证</span>
          </div>
          <div class="bzItem">
            <span class="iconfont icon-peifu"></span>
            <span>爽约包赔</span>
          </div>
          <div class="bzItem">
            <span class="iconfont icon-tuihuobaozhang"></span>
            <span>超时可退</span>
          </div>
          <div class="bzItem">
            <span class="iconfont icon-yihangyige"></span>
            <span>隐私保护</span>
          </div>
        </div>
        <div class="carCont">
          <div class="carTitle">
            <div>服务时间</div>
            <div class="carTitleRight">
              最近可约<span class="serveTime">{{ learnTime }}</span>
            </div>
          </div>
        </div>
        <div class="carCont">
          <div class="carTitle">
            <div>服务介绍</div>
          </div>
          <div class="carMain">
            <p>{{ detailInfo.package_introduce }}</p>
            <div class="mainItem">
              <div class="mainItemName">服务内容</div>
              <ul>
                <li
                  :key="index"
                  v-for="(item, index) in detailInfo.package_service_content"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
            <div class="mainItem">
              <div class="mainItemName">下单须知</div>
              <ul>
                <li>
                  所有按摩服务的预约需通过平台进行<span class="redText"
                    >线上预约</span
                  >。
                </li>
                <li>
                  为保障您的权益，付款应通过平台提供的安全支付系统完成，<span
                    class="redText"
                    >禁止线下</span
                  >现金或其他方式交易。
                </li>
                <li>
                  严禁提供、传播或参与任何<span class="redText"
                    >涉黄、淫秽、色情</span
                  >等违法行为。
                </li>
                <li>
                  服务开始后，因客户原因提前终止服务的，服务费<span
                    class="redText"
                    >不予退还</span
                  >。
                </li>
                <li>
                  按摩服务仅限于<span class="redText">合法、正规、健康</span
                  >的按摩项目。
                </li>
                <li>
                  客户因看见技师不够漂亮等与专业无关系列因素而要求退单者，交通费不予退还。
                </li>
              </ul>
            </div>
            <div class="mainItem">
              <div class="mainItemName">取消订单须知</div>
              <ul>
                <li>技师未接单可<span class="redText">全额退款</span>。</li>
                <li>
                  技师接单如果已经出发了车费<span class="redText"
                    >不予退款</span
                  >
                </li>
              </ul>
            </div>
            <div class="mainItem">
              <div class="mainItemName">平台赔付规则</div>
              <ul>
                <li>
                  为保障您的权益，技师若存在线下私自收费交易行为，请<span
                    class="redText"
                    >立即举报</span
                  >，经平台核实，为您追回本次消费金额，最高奖励可达5000元。
                </li>
              </ul>
            </div>
            <div class="mainItem">
              <div class="mainItemName">预约服务流程</div>
              <ul>
                <li>线上预约技师并支付服务费</li>
                <li>等待技师接单</li>
                <li>临近预约时间技师上门并联系客户</li>
                <li>核销订单并开始服务</li>
              </ul>
            </div>
          </div>
        </div>
        <!-- <div class="detailImg">
                <img :src="detailInfo.package_details_img" />
            </div> -->
        <div class="replyCont">
          <div class="replyTop">
            <div>用户点评({{ total + defReplay.length }}+)</div>
          </div>
          <div class="replyList">
            <div
              class="replyItem"
              :key="index"
              v-for="(item, index) in replayArr"
            >
              <div class="replyUserCont">
                <div class="userImg">
                  <img :src="item.head_img + ossSrc" />
                </div>
                <div class="userInfo">
                  <div class="userName">
                    <!-- <div class="userNameVal">{{ item.nick_name }}</div> -->
                    <div class="userNameVal">****</div>
                    <div class="replyTime">{{ item.create_time }}</div>
                  </div>
                  <div class="replyRate">
                    <van-rate
                      color="#4fc763"
                      size="16px"
                      v-model="item.star_rating"
                      readonly
                      allow-half
                    />
                    <div
                      class="delEvalText"
                      @click="delEval(item, index)"
                      v-if="item.is_user == 1"
                    >
                      删除
                    </div>
                  </div>
                </div>
              </div>
              <div class="replyInfoCont">
                <div class="replayMain">
                  <div class="replyText">{{ item.evaluate_content }}</div>
                  <div class="replyImg">
                    <div
                      :class="
                        index2 % 3 == 0 ? 'replyImgItem noleft' : 'replyImgItem'
                      "
                      :key="index2"
                      v-for="(item2, index2) in item.evaluate_img"
                    >
                      <img
                        :src="item2 + ossSrc"
                        @click="showImg(item.evaluate_img, index2)"
                      />
                    </div>
                  </div>
                  <div class="replayTech">
                    <span class="iconfont icon-jishi"></span>
                    {{ item.technician_nick_name }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="replyItem"
              :key="index"
              v-for="(item, index) in defReplay"
            >
              <div class="replyUserCont">
                <div class="userImg">
                  <img :src="item.head_img + ossSrc" />
                </div>
                <div class="userInfo">
                  <div class="userName">
                    <!-- <div class="userNameVal">{{ item.nick_name }}</div> -->
                    <div class="userNameVal">****</div>
                    <div class="replyTime">{{ item.create_time }}</div>
                  </div>
                  <div class="replyRate">
                    <van-rate
                      color="#4fc763"
                      size="16px"
                      v-model="item.star_rating"
                      readonly
                      allow-half
                    />
                    <div
                      class="delEvalText"
                      @click="delEval(item, index)"
                      v-if="item.is_user == 1"
                    >
                      删除
                    </div>
                  </div>
                </div>
              </div>
              <div class="replyInfoCont">
                <div class="replayMain">
                  <div class="replyText">{{ item.evaluate_content }}</div>
                  <div class="replyImg">
                    <div
                      :class="
                        index2 % 3 == 0 ? 'replyImgItem noleft' : 'replyImgItem'
                      "
                      :key="index2"
                      v-for="(item2, index2) in item.evaluate_img"
                    >
                      <img
                        :src="item2 + ossSrc"
                        @click="showImg(item.evaluate_img, index2)"
                      />
                    </div>
                  </div>
                  <!-- <div class="replayTech"><span class="iconfont icon-jishi"></span> {{ item.technician_nick_name }}</div> -->
                </div>
              </div>
            </div>
          </div>
          <div class="loadMore" v-if="replayArr.length > 0">
            {{ loadMoreText }}
          </div>
          <div class="loadMore" v-if="replayArr.length == 0">到底啦～</div>
        </div>
      </div>
      <div class="ctrlCont">
        <div class="leftBtn">
          <div class="goBack">
            <div @click="backFn" class="iconfont icon-fanhui"></div>
            <div>首页</div>
          </div>
          <div class="userTel">
            <div @click="contactFn" class="iconfont icon-kefu2"></div>
            <div>客服</div>
          </div>
        </div>
        <div class="rightBtn" @click="showTechFn">选择技师</div>
      </div>
    </div>
    <van-popup v-model:show="goodsMask" round position="bottom">
      <div class="goodsMaskCont">
        <div class="maskTitle">点击选择技师</div>
        <div class="noTech" v-if="techArr.length == 0">
          该套餐暂无技师，请换个套餐试试～
        </div>
        <div class="techArr" ref="techList" v-show="techArr.length > 0">
          <div
            :class="
              checkId == item.technician_id
                ? 'activeTech orderItem'
                : 'orderItem'
            "
            @click="checkTech(item, index)"
            :key="index"
            v-for="(item, index) in techArr"
          >
            <div class="goodsList">
              <div class="goodsItem">
                <div class="goodsImg">
                  <img :src="item.technician_head_img + ossSrc" />
                </div>
                <div class="goodsInfo">
                  <div class="goodsName">
                    <div class="newTag" v-if="item.is_new == 1">新人</div>
                    <div>{{ item.technician_nick_name }}</div>
                  </div>
                  <div class="orderTime">
                    <div class="newTag" v-if="item.service_status == 1">
                      可服务
                    </div>
                    <div class="serveing" v-if="item.service_status == 2">
                      服务中
                    </div>
                    <div class="blackTag" v-if="item.service_status == 3">
                      休息中
                    </div>
                    <div
                      class="serveTime"
                      v-if="item.service_status == 1 && item.rest_time"
                    >
                      休息时间：{{ item.rest_time }}
                    </div>
                  </div>
                  <div class="orderTime">
                    <div class="orderIconItem">
                      <div class="iconfont icon-w_aixin"></div>
                      <div>{{ item.collect_num }}</div>
                    </div>
                    <div class="orderIconItem">
                      <div class="iconfont icon-shoucang2"></div>
                      <div>{{ item.rate }}</div>
                    </div>
                    <div class="orderNum">已服务:{{ item.order_num }}单</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="disCont" v-if="item.service_status == 3"></div>
          </div>
        </div>
        <div class="maskBtn">
          <div :class="checkId != -1 ? 'canBuy' : 'buyGoods'" @click="buyFn">
            <span class="iconfont icon-shandian"></span
            >{{ checkId != -1 ? "立即预约" : "选择技师才能下单" }}
          </div>
        </div>
      </div>
    </van-popup>
    <van-image-preview
      :startPosition="startPosition"
      v-model:show="showVantImg"
      :images="priveImg"
    ></van-image-preview>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import { Swiper, SwiperItem } from "vux";
import getLoad from "@/components/public/getLoad";
import { details, checkTechnician, evaluate } from "@/http/api";

import getTimeOut from "@/components/public/getTimeOut";
export default {
  components: { getLoad, getTimeOut, Swiper, SwiperItem },
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      total: 0,
      loadMoreText: "",

      goodsMask: false,
      learnTime: "",
      techArr: [],
      tech_per_page: 5,
      tech_total: 0,
      tech_getting: false,
      tech_page: 1,
      checkId: -1,
      priveImg: [],
      showVantImg: false,
      startPosition: 0,
      detailInfo: {},
      replayArr: [],
      defReplay: [
        {
          head_img: "static/img/userImg/user41.png",
          create_time: "2024-02-20 09:12",
          evaluate_content: "上门服务巴适，都不用出门了",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user42.png",
          create_time: "2024-02-19 21:16",
          evaluate_content: "按摩师的服务非常细致周到，技术水平也非常高",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user33.png",
          create_time: "2024-02-19 10:03",
          evaluate_content: "非常舒适和满意",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user44.png",
          create_time: "2024-02-18 14:41",
          evaluate_content:
            "按摩师的专业技术和服务态度都非常好，让我感受到了极致的放松和愉悦体验",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user45.png",
          create_time: "2024-02-17 09:21",
          evaluate_content: "按摩师用心服务，技术高超",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user46.png",
          create_time: "2024-02-16 16:53",
          evaluate_content: "服务态度也很好，十分满意",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user47.png",
          create_time: "2024-02-16 06:46",
          evaluate_content: "一次愉快的体验",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user48.png",
          create_time: "2024-02-15 19:27",
          evaluate_content: "按摩师的专业水平和服务态度都很好，推荐给大家",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user49.png",
          create_time: "2024-02-14 23:19",
          evaluate_content: "有了上门按摩，还出什么门啊，牛皮",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user50.png",
          create_time: "2024-02-13 13:15",
          evaluate_content: "专业的按摩技术，温暖的服务",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user31.png",
          create_time: "2024-02-13 02:40",
          evaluate_content: "效果非常好",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user32.png",
          create_time: "2024-02-12 11:19",
          evaluate_content: "按摩过后整个人都精神了起来，非常感谢",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user33.png",
          create_time: "2024-02-11 04:58",
          evaluate_content: "按摩过后整个人都轻松了，效果非常好",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user34.png",
          create_time: "2024-02-10 18:31",
          evaluate_content: "服务态度好，按摩师专业水平高，值得信赖",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user35.png",
          create_time: "2024-02-09 07:24",
          evaluate_content: "按摩师技术高超，真正舒缓了我的肌肉疲劳",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user36.png",
          create_time: "2024-02-08 21:01",
          evaluate_content: "不错，推荐",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user37.png",
          create_time: "2024-02-07 15:54",
          evaluate_content: "还行，过几天再点",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user38.png",
          create_time: "2024-02-06 12:25",
          evaluate_content: "服务态度非常好",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user39.png",
          create_time: "2024-02-05 03:16",
          evaluate_content: "身体疲劳得到很好的缓解",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user40.png",
          create_time: "2024-02-04 17:58",
          evaluate_content: "整个按摩过程非常舒缓愉快",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user21.png",
          create_time: "2024-02-03 08:42",
          evaluate_content: "服务专业，感觉很放松",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user22.png",
          create_time: "2024-02-02 22:21",
          evaluate_content: "一小时按摩让我焕然一新",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user23.png",
          create_time: "2024-02-01 10:06",
          evaluate_content: "按摩环境舒适，体验极佳",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user24.png",
          create_time: "2024-01-31 18:47",
          evaluate_content: "按摩师技术高超，赞一个",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user25.png",
          create_time: "2024-01-30 14:39",
          evaluate_content: "身体舒服了许多，值得推荐",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user26.png",
          create_time: "2024-01-29 09:11",
          evaluate_content: "服务态度亲切，非常满意",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user27.png",
          create_time: "2024-01-28 19:01",
          evaluate_content: "按摩效果超乎想象，非常棒",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user28.png",
          create_time: "2024-01-27 07:47",
          evaluate_content: "放松身心，感谢专业按摩",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user29.png",
          create_time: "2024-01-26 22:32",
          evaluate_content: "可以一试",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user30.png",
          create_time: "2024-01-25 16:13",
          evaluate_content: "按摩师手法一流，舒适极了",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user11.png",
          create_time: "2024-01-24 19:54",
          evaluate_content: "赞一个",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user12.png",
          create_time: "2024-01-23 12:51",
          evaluate_content: "还可以，按了之后颈椎舒服了",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user13.png",
          create_time: "2024-01-22 09:33",
          evaluate_content: "最近腿又点不舒服，按了好多了",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user14.png",
          create_time: "2024-01-22 11:14",
          evaluate_content: "还可以吧，跟店里一样，只是不用出门了",
          star_rating: 5,
          evaluate_img: []
        },
        {
          head_img: "static/img/userImg/user15.png",
          create_time: "2024-01-21 21:21",
          evaluate_content: "值这个价",
          star_rating: 5,
          evaluate_img: []
        }
      ],
      per_page: 5,
      page: 1,
      last_page: 0,
      total: 0,
      getting: false
    };
  },
  props: {},
  methods: {
    backFn() {
      this.$router.back();
    },
    contactFn() {
      window.location.href = "tel:" + this.detailInfo.hotline_mobile;
    },
    buyFn() {
      if (this.checkId != -1) {
        this.$router.push({
          path: "/orderWait",
          query: {
            package_id: this.$route.query.id,
            technician_id: this.checkId
          }
        });
      }
    },
    showTechFn() {
      this.goodsMask = true;
      setTimeout(() => {
        this.$refs.techList.addEventListener("scroll", this.nextTechfn);
      }, 100);
    },
    showImg(arr, index) {
      if (arr.length > 0) {
        this.startPosition = index;
        this.priveImg = arr;
        this.showVantImg = true;
      }
    },
    checkTech(item) {
      if (item.service_status != 3) {
        this.checkId = item.technician_id;
      }
    },
    getHalfHourlyTimePoints() {
      let currentTime = new Date();
      // 设置当天22:00的时间
      const endOfDay = new Date(currentTime);
      endOfDay.setHours(24, 0, 0, 0);

      // 存储结果的数组
      const roundedHalfHourlyTimePoints = [];

      // 循环生成时间点，每隔30分钟
      while (currentTime <= endOfDay) {
        // 获取分钟数并确保为30的倍数
        const minutes = Math.floor(currentTime.getMinutes() / 30) * 30;

        // 格式化小时和分钟，保证单个数字的小时和分钟前面加0
        const formattedHour = currentTime
          .getHours()
          .toString()
          .padStart(2, "0");
        const formattedMinute = minutes.toString().padStart(2, "0");

        // 将时间点加入数组
        roundedHalfHourlyTimePoints.push(`${formattedHour}:${formattedMinute}`);

        // 增加30分钟
        currentTime.setMinutes(currentTime.getMinutes() + 30);
      }
      roundedHalfHourlyTimePoints.splice(0, 2);
      if (roundedHalfHourlyTimePoints.length > 0) {
        this.learnTime = "今天 " + roundedHalfHourlyTimePoints[0];
      } else {
        this.learnTime = "明天 00:00";
      }
      const sevenPM = new Date(currentTime);
      sevenPM.setHours(23, 0, 0, 0);
      let nowTime = new Date();
      let result = nowTime >= sevenPM;
      if (result) {
        this.learnTime = "明天 00:00";
      }
    },
    getData() {
      let data = {
        package_id: this.$route.query.id
      };
      details(data)
        .then(res => {
          if (res.data.code == 1) {
            this.detailInfo = res.data.data;
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showCont = true;
          this.showTimeOut = true;
        });
    },
    getTech() {
      let data = {
        package_id: this.$route.query.id,
        per_page: this.tech_per_page,
        page: this.tech_page
      };
      checkTechnician(data)
        .then(res => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              arr[i]["rate"] =
                (Number(arr[i].technician_score) / 20).toFixed(1) < 4.8
                  ? 4.8
                  : (Number(arr[i].technician_score) / 20).toFixed(1);
              this.techArr.push(arr[i]);
            }
            setTimeout(() => {
              this.tech_getting = false;
            }, 100);
            this.tech_last_page = res.data.data.last_page;
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showToast = true;
          this.showText = "网络超时";
        });
    },
    nextTechfn() {
      if (this.$route.path == "/detail") {
        let h = this.$refs.techList.scrollHeight;
        let wh = this.$refs.techList.clientHeight;
        let top = this.$refs.techList.scrollTop;
        let bottom = h - wh - top;
        console.log(bottom);
        if (bottom <= 50) {
          console.log(333);
          if (this.tech_getting == false) {
            console.log(444);
            if (this.tech_last_page > this.tech_page) {
              this.tech_getting = true;
              this.tech_page++;
              console.log(222);
              this.getTech();
            }
          }
        }
      }
    },
    getEval() {
      let data = {
        package_id: this.$route.query.id,
        per_page: this.per_page,
        page: this.page
      };
      evaluate(data)
        .then(res => {
          if (res.data.code == 1) {
            if (res.data.data.data.length > 0) {
              let arr = res.data.data.data;
              for (var i = 0; i < arr.length; i++) {
                this.replayArr.push(arr[i]);
              }
              setTimeout(() => {
                this.getting = false;
              }, 100);
              this.last_page = res.data.data.last_page;
              this.total = res.data.data.total;
              if (this.page == this.last_page) {
                this.loadMoreText = "到底啦～";
              } else {
                this.loadMoreText = "评论加载中~";
              }
            } else {
              this.last_page = 0;
              this.total = 0;
            }
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showToast = true;
          this.showText = res.data.msg;
        });
    },
    nextfn() {
      if (this.$route.path == "/detail") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getEval();
            }
          }
        }
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  created() {
    this.getHalfHourlyTimePoints();
    this.getData();
    this.getTech();
    this.getEval();
  }
};
</script>

<style scoped lang="less">
.detailContainer {
  background-color: #fff;
  padding-bottom: 3.75rem;
  box-sizing: border-box;
  .bannerCont {
    width: 100%;
    font-size: 0;
    img {
      width: 100%;
    }
  }
  .mainCont {
    box-sizing: border-box;
    background-color: #f7f7f7;
    .typeCont {
      background-color: #fff;
      width: 100%;
      padding: 0.5rem 4%;
      box-sizing: border-box;
      font-size: 0.6rem;
      box-sizing: border-box;
      // justify-content: space-between;
      overflow-x: auto;
      white-space: nowrap;
      // flex-wrap: wrap;
      .typeItem {
        display: inline-block;
        white-space: nowrap;
        border-radius: 0.25rem;
        padding: 0.35rem 0.7rem;
        box-sizing: border-box;
        position: relative;
        margin-right: 4%;
        border: 1px solid #4fc763;
        color: #4fc763;
        text-align: center;
        .typeItemName {
          font-weight: bold;
          font-size: 0.7rem;
        }
        .typeItemPrice {
          margin-top: 0.25rem;
        }
      }
    }
    .bzCont {
      display: flex;
      background-color: #fff;
      width: 100%;
      padding: 0.5rem 4%;
      justify-content: space-between;
      box-sizing: border-box;
      font-size: 0.6rem;
      .bzItem {
        color: #666;
        display: flex;
        align-items: center;
        .iconfont {
          color: #4fc763;
          font-size: 0.8rem;
          margin-right: 0.25rem;
        }
      }
    }
    .carCont {
      margin-top: 0.75rem;
      background-color: #fff;
      width: 100%;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      .carTitle {
        color: #666;
        font-size: 0.7rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .carTitleRight {
          .serveTime {
            color: #4fc763;
            margin-left: 0.5rem;
          }
          .iconfont {
            font-size: 0.6rem;
          }
        }
      }
      .serveTag {
        width: 100%;
        margin-top: 0.75rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .tagItem {
          width: 48%;
          background-color: #ebebeb;
          margin-bottom: 0.5rem;
          text-align: center;
          padding: 0.5rem 0;
          border-radius: 0.15rem;
          font-size: 0.6rem;
        }
      }
      .carMain {
        margin-top: 0.75rem;
        .mainItem {
          margin-top: 0.75rem;
          .mainItemName {
            font-size: 0.7rem;
            font-weight: bold;
            margin-bottom: 0.25rem;
          }
          ul {
            list-style: outside;
            padding-left: 1.5rem;
            box-sizing: border-box;
          }
          .redText {
            color: #f56c6c;
          }
        }
      }
    }
    .tipCont {
      background-color: #edf2fd;
      width: 100%;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      .tipTitle {
        color: #4fc763;
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
      }
      ul {
        margin-top: 0.75rem;
        list-style: outside;
        padding-left: 1.5rem;
        box-sizing: border-box;
        color: #4fc763;
      }
    }
    .replyCont {
      background-color: #fff;
      width: 100%;
      padding: 0.75rem 4%;
      margin-top: 0.75rem;
      box-sizing: border-box;
      .replyTop {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        font-size: 0.7rem;
        font-weight: bold;
        // border-bottom: 1px solid #ebebeb;
        color: #333;
      }
      .replyList {
        width: 100%;
        .replyItem {
          width: 100%;
          padding-bottom: 0.25rem;
          margin-bottom: 0.5rem;
          // border-bottom: 1px solid #ebebeb;
          .replyUserCont {
            width: 100%;
            display: flex;
            align-items: center;
            .userImg {
              width: 2.25rem;
              height: 2.25rem;
              border-radius: 1.5rem;
              overflow: hidden;
              img {
                width: 100%;
              }
            }
            .userInfo {
              flex: 1;
              width: 0.5rem;
              margin: 0 0 0 0.75rem;
              .userName {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-between;
                .userNameVal {
                  font-size: 0.75rem;
                  white-space: nowrap;
                  overflow: hidden;
                  width: 1rem;
                  flex: 1;
                  margin-right: 0.75rem;
                  text-overflow: ellipsis;
                }
                .replyTime {
                  font-size: 0.6rem;
                  color: #999;
                }
              }
              .replyRate {
                margin-top: 0.15rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .delEvalText {
                  color: #999;
                  font-size: 0.6rem;
                  text-decoration: underline;
                }
              }
            }
          }
          .replyInfoCont {
            width: 100%;
            margin-top: 0.5rem;
            padding-left: 3rem;
            box-sizing: border-box;
            .replayMain {
              background-color: #f2f2f2;
              padding: 0.5rem;
              box-sizing: border-box;
              border-radius: 0.25rem;
              .replyImg {
                width: 100%;
                display: flex;
                margin-top: 0.75rem;
                flex-wrap: wrap;
                .replyImgItem {
                  margin-bottom: 0.25rem;
                  margin-left: 2%;
                  height: 4rem;
                  img {
                    height: 100%;
                    border-radius: 0.25rem;
                  }
                }
                .noleft {
                  margin-left: 0;
                }
              }
              .replayTech {
                text-align: right;
                margin-top: 0.25rem;
                color: #666;
                font-size: 0.6rem;
                color: #4fc763;
              }
            }
          }
        }
      }
      .loadMore {
        // padding-bottom: 1.5rem;
        text-align: center;
        font-size: 0.6rem;
        color: #999;
      }
    }
    .detailImg {
      background-color: #fff;
      font-size: 0;
      img {
        width: 100%;
      }
    }
  }
  .ctrlCont {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 4%;
    box-sizing: border-box;
    align-items: center;
    .leftBtn {
      display: flex;
      align-items: center;
      .goBack,
      .userTel {
        padding: 0 0.75rem;
        text-align: center;
        font-size: 0.6rem;
        margin-right: 0.75rem;
        .iconfont {
          font-size: 1.2rem;
        }
      }
      .userTel {
        .iconfont {
          font-size: 1.1rem;
        }
      }
    }
    .rightBtn {
      font-size: 0.7rem;
      background-color: #4fc763;
      color: white;
      padding: 0.5rem 2rem;
      border-radius: 1rem;
      letter-spacing: 0.2rem;
    }
  }
  .goodsMaskCont {
    width: 100%;
    padding: 1rem 4%;
    box-sizing: border-box;
    background-color: #f7f7f7;
    .maskTitle {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      text-align: center;
    }
    .noTech {
      color: #666;
      text-align: center;
      margin-bottom: 1rem;
    }
    .techArr {
      width: 100%;
      max-height: 15rem;
      box-sizing: border-box;
      overflow-y: auto;
      .orderItem {
        width: 100%;
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 0.25rem;
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
        box-sizing: border-box;
        position: relative;
        .disCont {
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(255, 255, 255, 0.5);
          width: 100%;
          height: 100%;
        }

        .goodsList {
          width: 100%;
          .goodsItem {
            width: 100%;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            .goodsImg {
              width: 3.5rem;
              height: 3.5rem;
              overflow: hidden;
              border-radius: 0.25rem;
              margin-right: 0.5rem;
              img {
                width: 100%;
              }
            }
            .goodsInfo {
              width: 0.5rem;
              flex: 1;
              display: flex;
              flex-direction: column;
              height: 3.5rem;
              justify-content: space-between;
              .goodsName {
                width: 100%;
                font-size: 0.7rem;
                display: flex;
                .newTag {
                  background-color: #4fc763;
                  color: white;
                  font-size: 0.6rem;
                  padding: 0.05rem 0.5rem;
                  border-radius: 0.1rem;
                  margin-right: 0.5rem;
                }
              }
              .orderTime {
                font-size: 0.6rem;
                color: #666;
                display: flex;
                align-items: center;
                .serveTime {
                  color: #666;
                  font-size: 0.6rem;
                }
                .newTag,
                .blackTag,
                .serveing {
                  // background-color: #4fc763;
                  border: 1px solid #4fc763;
                  color: #4fc763;
                  font-size: 0.6rem;
                  padding: 0.05rem 0.5rem;
                  border-radius: 0.1rem;
                  margin-right: 0.5rem;
                }
                .blackTag {
                  // background-color: #ebebeb;
                  color: #666;
                  border: 1px solid #666;
                }
                .serveing {
                  color: #45bb4f;
                  border: 1px solid #45bb4f;
                }
                .orderIconItem {
                  display: flex;
                  align-items: center;
                  margin-right: 0.5rem;
                }
                .iconfont {
                  color: #4fc763;
                  margin-right: 0.25rem;
                }
                .orderNum {
                  margin-left: 0.75em;
                }
              }
              .goodsType {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .goodsTypeItem {
                  padding: 0.1rem 0.5rem;
                  background-color: #f6f6f6;
                  font-size: 0.6rem;
                  height: 1rem;
                  line-height: 1rem;
                  border-radius: 0.15rem;
                  color: #999;
                }
                .shopInfo {
                  // flex: 1;
                  display: flex;
                  align-items: center;
                  .shopInfoItem {
                    display: flex;
                    margin-right: 0.75rem;
                    color: #666;
                    align-items: center;
                    .iconfont {
                      margin-right: 0.25rem;
                      font-size: 0.8rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .activeTech {
        background-color: #daf7de;
        border: 1px solid #4fc763;
      }
    }
    .maskBtn {
      // margin: 1.25rem 0 0.75rem;
      margin-top: 0.75rem;
      width: 100%;
      border-radius: 0.25rem;
      overflow: hidden;
      display: flex;
      .buyGoods,
      .canBuy {
        width: 100%;
        font-size: 0.7rem;
        text-align: center;
        background-color: #4fc763;
        color: white;
        padding: 0.75rem 0;
      }
      .buyGoods {
        opacity: 0.5;
      }
    }
  }
}
</style>
